<template>
	<view class="pages">
		<view class="sign_in_bg">
			<view class="current_integral">
				<text class="name">当前积分</text>
				<view class="current_integral_num" @click="skip">
					<text>{{user_info.integral}}</text>
					<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E5%8F%B3%E7%AE%AD%E5%A4%B4%20%282%29.png"  mode="widthFix"></image>
				</view>
				<text class="tip">连续签到将获得更多积分~</text>
			</view>
		</view>
		<view class="main">
			<view class="sign_in_warp">
				<view class="sign_in_day">
					<text>已经连续签到</text>
					<text class="day_color"> {{user_info.sign}} </text>
					<text>天</text>
				</view>
				<view class="sign_in_list">
					<view class="sign_in_item" v-for="(item,index) in sign_in_list" :key="index" :style="{width:item.width+'rpx'}">
						<image :src="item.sign_in"  v-if="user_info.sign>=(index+1)"></image>
						<image :src="item.not_sign_in"  v-else></image>
					</view>
				</view>
				<view class="sign_in_btn" @click="go_sign">
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E5%B7%B2%E7%AD%BE%E5%88%B0%E6%8C%89%E9%92%AE%E5%8F%98%E7%81%B0.png" v-if="is_Sign">
					</image>
					<image
						src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E5%88%B0.png"  v-else>
					</image>
					
				</view>
			</view>
			<view class="sign_in_rule">
				<text class="h1">【积分规则】</text>
				<text class="title">如何获取积分？</text>
				<text>联系红娘获取积分/每日签到/更多方式敬请期待...</text>
				<text class="title">积分的用途</text>
				<text>1.次卡会员可通过积分解锁照片/询问ta人</text>
				<text>2.其余会员在每日解锁额度用完后可通过积分继续解锁照片</text>
				<text>3.更多用途敬请期待...</text>
			</view>
		</view>
		<u-popup :show="sign_in_show" @close="close_sign_in=false" :safeAreaInsetBottom="safeAreaInsetBottom" mode="center" round="20">
			<view class="sign_in_succeed">
				<view class="succeed_tip">
					<text>恭喜获得{{sign}}个积分</text>
				</view>
				<view class="know" @click="sign_in_show=false">
					<image src="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%88%91%E7%9F%A5%E9%81%93%E4%BA%86.png"></image>
				</view>
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import {
		sign,
		getTodaySign,
		getUserInfo,
		
	} from '@/common/api.js';
	export default {
		data() {
			return {
				safeAreaInsetBottom:false,
				sign_in_show:false,
				sign_in_list: [{
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E4%B8%80%E5%A4%A9.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E4%B8%80%E5%A4%A9%20%281%29.png',
					day: '星期一',
					width: '120',
				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E4%BA%8C%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E4%BA%8C%E5%A4%A9.png',
					day: '星期二',
					width: '120',

				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E4%B8%89%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E4%B8%89%E5%A4%A9.png',
					day: '星期三',
					width: '250',
				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E5%9B%9B%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E5%9B%9B%E5%A4%A9.png',
					day: '星期四',
					width: '120',
				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E4%BA%94%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E4%BA%94%E5%A4%A9.png',
					day: '星期五',
					width: '120',
				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E5%85%AD%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E5%85%AD%E5%A4%A9.png',
					day: '星期六',
					width: '120',
				}, {
					sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E7%AC%AC%E4%B8%83%E5%A4%A9%20%281%29.png',
					not_sign_in: 'https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AC%AC%E4%B8%83%E5%A4%A9.png',
					day: '星期天',
					width: '390',
				}],
				is_Sign:false,
				user_info:{},
				sign:''
			}
		},
		onLoad(option) {


		},
		onShow() {
		
		
			try {
				if (uni.getStorageSync('access_token')) {
					// this.is_login = true
					
					this.get_TodaySign()
					this.get_UserInfo()
					// this.getMember_List()
					// this.get_UserInfo()
				} else {
					// this.is_login = false
				}		
			} catch (e) {
				//TODO handle the exception
			}
		},
		methods:{
			skip(){
				uni.navigateTo({
					url:'/pagesA/user_integral_detail/index'
				})
			},
			get_UserInfo() {
				getUserInfo({
						custom: {
							auth: false,
							toast: false,
							catch: false
						}
					}).then((r) => {
						this.user_info = r
				}).catch((err) => {
			
				})
			},
			go_sign(){
				if(this.is_Sign==true){
					return
				}
				let data={}
				sign(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.sign=result
					// this.$signSound()
					this.sign_in_show=true
					this.get_TodaySign()
					this.get_UserInfo()
				}).catch((err) => {})
				
				// uni.navigateTo({
				// 	url:'/pagesA/go_sign_in/index'
				// })
			},
			get_TodaySign(){
				let data={
					params:{	
					}
				}
				getTodaySign(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					console.log(result)
					this.is_Sign=result
					
				}).catch((err) => {})
			},
		}
	}
</script>

<style lang="scss">
	.pages {
		padding-bottom: 35rpx;
		.sign_in_bg {
			width: 750rpx;
			height: 600rpx;
			background-image: url('https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/sign_in/%E7%AD%BE%E5%88%B0%E9%A2%86%E7%A7%AF%E5%88%86%E8%83%8C%E6%99%AF.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: left top;

			.current_integral {
				padding: 89rpx 20rpx 0;
				box-sizing: border-box;

				text {

					display: block;

				}

				.name {
					font-weight: bold;
					font-size: 28rpx;
					color: #2E2E2E
				}

				.current_integral_num {
					display: flex;
					align-items: center;
					margin-bottom: 60rpx;
					text {
						color: #2E2E2E;
						font-weight: bold;
						font-size: 66rpx;
						
					}
						
					image{
						width:16rpx;
						margin-left: 10rpx;
					}
				}

				.tip {
					font-size: 26rpx;
					color: #AC7440;
					text-indent: 19rpx;
				}
			}
		}

		.main {
			padding: 0 20rpx;
			box-sizing: border-box;
			position: relative;
			margin-top: -281rpx;

			.sign_in_warp {
				background-color: #fff;
				height: 620rpx;
				border-radius: 30rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				margin-bottom: 20rpx;
				.sign_in_day {
					padding: 32rpx 0rpx;
					box-sizing: border-box;

					text {
						font-size: 30rpx;
						font-weight: 400;
						color: #111111;

						&.day_color {
							color: #FF6200;
							margin: 0 10rpx;
						}
					}
				}

				.sign_in_list {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;

					.sign_in_item {
						height: 168rpx;
						margin-bottom: 20rpx;
					}
				}

				.sign_in_btn {
					margin: 20rpx 20rpx 23rpx;
					box-sizing: border-box;
					width: 630rpx;
					height: 102rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.sign_in_rule {
				background-color: #fff;
				border-radius:30rpx;
				padding:40rpx 38rpx 41rpx 33rpx;
				box-sizing: border-box;
				
				.h1{
					font-size:32rpx;
					color: #111111;
					font-weight: bold;
					text-indent: -12rpx;
					line-height: 61rpx;
				}
				.title{
					color: #111111;
					font-weight: bold;
				}
				text {
					line-height:48rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #686868;
					display: block;
				}
			}
		}
		.sign_in_succeed{
			width: 601rpx;
			height:670rpx;
			background-image:url('https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E7%AD%BE%E5%88%B0%E6%88%90%E5%8A%9F.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: relative;
			.succeed_tip{
				bottom: 191rpx;
				position: absolute;
				left:50%;
				transform: translateX(-50%);
				text{
					font-size:40rpx;
					color: #686868;
					white-space: nowrap;
				}
			}
			.know{
				width:534rpx;
				height:102rpx;
				position: absolute;
				bottom: 51rpx;
				left:50%;
				transform: translateX(-50%);
			}
		}
	}
</style>
